<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets">


<ui:composition template="/Template.xhtml">
	<ui:define name="menu">
		<table border="0" cellpadding="0" cellspacing="0" width="100%">
			<tr height="20">
				<td background="./Images/menu_hg.jpg" width="22" />
				<td background="./Images/menu_h.jpg" width="100" />
				<td background="./Images/menu_hm00.jpg" width="40" />
				<td background="./Images/menu_h.jpg" width="190" />
				<td background="./Images/menu_hd.jpg" width="21" />
				<td width="164"/>
				<td background="./Images/menu_hg.jpg" width="22" />
				<td background="./Images/menu_h.jpg" width="105" />
				<td background="./Images/menu_hm00.jpg" width="40" />
				<td background="./Images/menu_h.jpg" width="130" />
				<td background="./Images/menu_hm01.jpg" width="40" />
				<td background="./Images/h.jpg" width="105" />
				<td background="./Images/hd.jpg" width="21" />
			</tr>
			<tr height="35">
				<td background="./Images/menu_g.jpg" width="22" />
				<td bgcolor="#C7AFBD" valign="top"><a class="menu" href="./AnnoncesRecherche.jsf">Rechercher</a></td>
				<td background="./Images/menu_m00.jpg" width="40" />
				<td bgcolor="#C7AFBD" valign="top"><a class="menu" href="./AnnoncesChercheurNouvelle.jsf">Ajouter une annonce</a></td>
				<td background="./Images/menu_d.jpg" width="21" />
				<td />
				<td background="./Images/menu_g.jpg" width="22" />
				<td bgcolor="#C7AFBD" valign="top"><a class="menu" href="./AnnoncesChercheurFavorites.jsf">Mes favoris</a></td>
				<td background="./Images/menu_m00.jpg" width="40" />
				<td bgcolor="#C7AFBD" valign="top"><a class="menu" href="./AnnoncesChercheurPerso.jsf">Mes annonces</a></td>
				<td background="./Images/menu_m01.jpg" width="40" />
				<td bgcolor="#F8F2DA" valign="top"><a class="menuselect" href="./Panier.jsf">Mon panier</a></td>
				<td background="./Images/d.jpg" width="21" />
			</tr>
			<tr height="20">
				<td background="./Images/menu_bg.jpg" width="22" />
				<td background="./Images/menu_b.jpg" />
				<td background="./Images/menu_bm00.jpg" width="40" />
				<td background="./Images/menu_b.jpg" />
				<td background="./Images/menu_mg.jpg" width="21" /> 
				<td background="./Images/h.jpg"/>
				<td background="./Images/menu_md.jpg" width="22" />
				<td background="./Images/menu_b.jpg" />
				<td background="./Images/menu_bm00.jpg" width="40" />
				<td background="./Images/menu_b.jpg" />
				<td background="./Images/menu_bm01.jpg" width="40" />
				<td bgcolor="#F8F2DA" />
				<td background="./Images/d.jpg" width="21" />
			</tr>
		</table>
	</ui:define>

	<ui:define name="page">

		<table>
			<tr>
				<td align="right">Coordoonées de facturation</td>
				<td width="15"></td>
				<td><span style="color:#aeaeac">Confirmation du payement</span></td>
			</tr>
		</table>
		<h:form>
			<h1>Coordoonées de facturation</h1>
			
			<p>Lorsque vous avez terminé, cliquez sur le bouton « Continuer »</p>
			<table>
				<tr height="20">
					<td colspan="3" align="right"><font color="#ff0000">* Champs requis</font></td>
				</tr>
			
				<tr>
					<td align="right">Nom<font color="#ff0000">*</font></td>
					<td width="15"></td>					
					<td>
						<h:inputText  required="true" id="nom" />
						 <h:message for="nom" />
					</td>
				</tr>
				<tr>
					<td align="right">Prénom<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="prenom" />
						<h:message for="prenom" />
					</td>
				</tr>
				<tr>
					<td align="right">
					<div>Adresse ligne 1<font color="#ff0000">*</font></div>
					<div  style="color:color:#aeaeac; min-width:50px">Rue, voie, boîte postale</div>					
					</td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="adresse1" />
						<h:message for="adresse" />
					</td>
				</tr>
				<tr>
					<td align="right">
					<div>Adresse ligne 2<font color="#ff0000">*</font></div>
					<div style="color:#aeaeac;min-width:80px">Appartement, bâtiment, étage, digicode, cedex, etc.</div>					
					</td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="adresse2" />
						<h:message for="adresse" />
					</td>
				</tr>
				
				
				<tr>
					<td align="right">Ville<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="ville" />
						<h:message for="ville" />
					</td>
				</tr>
				
				<tr>
					<td align="right">Code postal<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="codepostal" />
						<h:message for="codepostal" />
					</td>
				</tr>
				
				<tr>
					<td align="right">Etat<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="etat" />
						<h:message for="etat" />
					</td>
				</tr>
				
					<tr>
					<td align="right" style="min-width:50px">Indiquez les informations correspondant à votre carte</td>
					<br/>
					
				</tr>
				
				<tr>
					<td align="right">Numéro de la carte bleue<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="numerocarte" />
						<h:message for="numerocarte" />
					</td>
				</tr>
				<tr>
					<td align="right">Nom du titulaire de la carte<font color="#ff0000">*</font></td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="titulairecarte" />
						<h:message for="titulairecarte" />
					</td>
				</tr>
				<tr>
					<td align="right">Date d'expiration<font color="#ff0000">*</font>
					<div style="color:#aeaeac; min-width:60px; " >
					(Ex: 12/2013)
					</div>
					</td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="dateexpiration" >
						<f:convertDateTime pattern="MM/yyyy"/>
						</h:inputText>
						<h:message for="dateexpiration" />
					</td>
				</tr>
				<tr>
					<td align="right">
					<div>Cryptogramme visuel<font color="#ff0000">*</font></div>
					<div style="color:#aeaeac; min-width:60px; " >
					Au dos des Carte Bancaire, Visa et MasterCard, vous trouverez une série unique de trois chiffres
					</div>
					<div style="color:#aeaeac; min-width:60px; ">
					, juste après le numéro de votre carte, dans l'espace réservé à la signature
					</div>
					</td>
					<td width="15"></td>
					<td>
						<h:inputText  required="true" id="cryptogramme" />
						<h:message for="cryptogramme" />
					</td>
				</tr>
				
				<tr>
					
					<td align="right"></td>
					<td width="15"></td>
					<td>
						<h:commandButton value="Continuer"
							action="PayementConfirmation" id="confirmationPayement" />
						<h:message for="confirmationPayement" />
						
					</td>
				</tr>
				
			</table>


			
		</h:form>

		<br/>
		<table>
			<tr>
				<td align="right" width="15"></td>
				<td width="15"></td>
				<td>
				<h:form>
					<h:commandButton value="Annuler" action="Panier" />
				</h:form>
				</td>
			</tr>

		</table>

	</ui:define>
</ui:composition>
</html>